<template>
  <div>
    <search-bar class="search">
      <template slot="peopleSearch">
        <el-form ref="form" :model="searchType" label-width="80px">
          <el-row type="flex">
            <el-form-item label="商品类型:">
              <el-col>
                <el-input v-model="searchType.className" class="input" />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col class="searchButton">
                <el-button type="primary" class="CXButton" @click="search">
                  <i class="el-icon-search" />搜索</el-button>
              </el-col>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
    </search-bar>
    <el-card>
      <!-- 新增按钮 -->
      <el-row class="addButton">
        <el-col>
          <el-button type="warning" @click="showDialog = true">
            <i class="el-icon-circle-plus-outline" /> 新增</el-button>
        </el-col>
      </el-row>
      <!-- 表格表单 -->
      <el-table
        :data="goodsType"
        style="width: 100% "
        stripe
        :row-style="{height: '10'}"
        :cell-style="{padding: '0'}"
        :header-cell-style="{color:'#000',background:'#f3f6fb'}"
      >
        <el-table-column
          prop="classId"
          label="序号"
          width="150"
        />
        <el-table-column
          prop="className"
          label="商品类型名称"
          width="700"
        />
        <el-table-column
          label="操作"
          width="120"
        >
          <el-button type="text">修改</el-button>
          <el-button type="text" style="color:hotpink">删除</el-button>
        </el-table-column>

      </el-table>
      <!-- 表格表单 -->
    </el-card>
    <el-dialog :visible="showDialog" title="新增商品类型">
      <el-form ref="dialogForm">
        <el-form-item label="商品类型名称">
          <el-input />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsTypeAPI } from '@/api/goods'
export default {
  data() {
    return {
      searchType: {},
      goodsType: [],
      searchConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      showDialog: false
    }
  },
  async created() {
    const res = await getGoodsTypeAPI(this.searchConfig)
    console.log(res)
    this.goodsType = res.data.currentPageRecords
    this.total = res.data.totalCount
  },
  methods: {
    search() {

    }

  }
}
</script>

<style lang="scss" scoped>
.search{
width: 100%;
.searchButton{
  margin-left:-80px;
}
}
.addButton{
  margin-bottom: 20px;
}
</style>

